<template>
	<view class="u-page record-page">
		<view class="record-item">
			<u-sticky>
				<u-tabs :list="recordItem" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</u-sticky>
		</view>
		<!-- <view class="record-content">
			<view class="record">
				<view class="record-c">
					<view class="text-grey text-cut">厦门君澄网络科技有限公司</view>
					<view class="text-gray text-sm flex">2021-05-01</view>
				</view>
				<view class="record-a">
					<button class="cu-btn bg-gradual-blue">预览</button>
					<button class="cu-btn bg-gradual-red">删除</button>
				</view>
			</view>
			<view class="record">
				<view class="record-c">
					<view class="text-grey text-cut">厦门君澄网络科技有限公司</view>
					<view class="text-gray text-sm flex">2021-05-01</view>
				</view>
				<view class="record-a">
					<button class="cu-btn bg-gradual-blue">预览</button>
					<button class="cu-btn bg-gradual-red">删除</button>
				</view>
			</view>
			<view class="record">
				<view class="record-c">
					<view class="text-grey text-cut">厦门君澄网络科技有限公司</view>
					<view class="text-gray text-sm flex">2021-05-01</view>
				</view>
				<view class="record-a">
					<button class="cu-btn bg-gradual-blue">预览</button>
					<button class="cu-btn bg-gradual-red">删除</button>
				</view>
			</view>
			<view class="record">
				<view class="record-c">
					<view class="text-grey text-cut">厦门君澄网络科技有限公司</view>
					<view class="text-gray text-sm flex">2021-05-01</view>
				</view>
				<view class="record-a">
					<button class="cu-btn bg-gradual-blue">预览</button>
					<button class="cu-btn bg-gradual-red">删除</button>
				</view>
			</view>
			<view class="record">
				<view class="record-c">
					<view class="text-grey text-cut">厦门君澄网络科技有限公司</view>
					<view class="text-gray text-sm flex">2021-05-01</view>
				</view>
				<view class="record-a">
					<button class="cu-btn bg-gradual-blue">预览</button>
					<button class="cu-btn bg-gradual-red">删除</button>
				</view>
			</view>
		</view> -->
		<mescroll-body ref="mescrollRef"
		@init="mescrollInit" 
		@down="downCallback"
		@up="upCallback"
		:down="downOption" 
		:up="upOption" :safearea="true">
			<view class="cu-list slider-list" v-if="current==0">
				<view class="cu-item slider-item" @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" 
				 :class="modalName=='move-box-'+ index?'slider-move-cur':''" v-for="(item,index) in 4" :key="index" :data-target="'move-box-' + index">
					<view class="record">
						<view class="record-c">
							<view class="text-grey text-cut">厦门君澄网络科技有限公司</view>
							<view class="text-gray text-sm flex">2021-05-01</view>
						</view>
						<view class="record-a">
							<button class="cu-btn bg-gradual-blue" style="margin-right: 20rpx;">预览</button>
							<button class="cu-btn bg-gradual-purple">下载</button>
						</view>
					</view>
					<view class="move slider-move">
						<button class="cu-btn bg-gradual-red">删除</button>
					</view>
				</view>
			</view>
			<view class="rich-list" v-else>
				<view class="rich">
					<view class="rich-c">
						<view class="text-cut m-d">变更</view>
						<view class="text-gray text-sm flex m-t">05月01日 14:00</view>
					</view>
					<view class="rich-d">
						<view class="text-black r-d">-5.00</view>
						<view class="text-gray text-sm flex r-y">余额 195.00</view>
					</view>
				</view>
				<view class="rich">
					<view class="rich-c">
						<view class="text-cut m-d">会员充值</view>
						<view class="text-gray text-sm flex m-t">05月01日 18:00</view>
					</view>
					<view class="rich-d">
						<view class="text-yellow r-d">+200.00</view>
						<view class="text-gray text-sm flex r-y">余额 200.00</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "mescroll-uni/mescroll-mixins.js";
	export default{
		mixins: [MescrollMixin],
		data(){
			return{
				upOption:{
					auto:false,
					textNoMore:'我也是有底线的'
				},
				downOption:{
					auto:false
				},
				recordItem:[{
					name: '变更'
				}, {
					name: '账单'
				}],
				current: 0,
				listTouchStart: 0,
				listTouchDirection: null,
				modalName: null,
			}
		},
		onShow(){
			this.$nextTick(() => {
				this.init();
			})
		},
		methods:{
			init(){
				this.mescroll.resetUpScroll();
			},
			downCallback(){
				this.mescroll.resetUpScroll();
			},
			upCallback(page){
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				/* if(pageNum == 1) this.dataList = []; */
				let param = {
					page:pageNum,
					limit:pageSize,
				};
				
				/* this.taskNum = res.data.total;
				// 接口返回的当前页数据列表 (数组)
				let curPageData  = res.data.list; 
				// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回10个,则curPageLen=10)
				let curPageLen = res.data.list.length; 
				// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
				let totalPage = res.data.total%pageSize>0?
				Math.floor(res.data.total/pageSize)+1:Math.floor(res.data.total/pageSize); 
				// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
				let totalSize = res.data.total; */
				/* this.dataList = this.dataList.concat(curPageData); */
				this.mescroll.endByPage(1, 2);
			},
			change(index) {
				this.current = index;
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style>
	.record{
		width: 100%;
		display: flex;
		flex-direction:row;
		justify-content: space-between;
		padding: 10rpx 20rpx;
	}
	.record-c{
		display: flex;
		flex-direction:column;
	}
	.record-a{
		/* width: 204rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center; */
	}
	.slider-item{
		position: relative;
		display: flex;
	}
	.slider-move{
		align-items: center;
		display: flex;
		width: 92rpx;
	}
	.cu-list>.slider-move-cur{
		transform: translateX(-132rpx);
	}
	.slider-list{
		overflow-x: hidden;
	}
	.rich-list{
		display: flex;
		flex-direction: column;
	}
	.rich{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 30rpx 20rpx;
		border-bottom:1px solid #E9E9E9;
	}
	.rich-c{
		display: flex;
		flex-direction: column;
	}
	.rich-d{
		display: flex;
		flex-direction: column;
	}
	.r-d{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 15px;
		font-weight: 600;
		margin-bottom: 5px;
	}
	.r-y{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.m-d{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 15px;
		margin-bottom: 5px;
	}
	.m-t{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
</style>
